<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
pageContext.setAttribute("basePath",basePath);
%>

<div style="margin: 30px 0;"></div>
<div id="detailImgList" style="width: 30%">
	<ul id="images">
		<c:forEach var="item" items="${picList }" varStatus="vs">
			
			<c:if test="${vs.index eq 0 }">
				<li><img alt="银行卡正面照" src="${basePath}${item.affix_path}"
					class="imgClass" id="${item.affix_uuid }"></li>
			</c:if>
			<c:if test="${vs.index eq 1 }">
				<li><img alt="银行卡反面照" src="${basePath}${item.affix_path}"
					class="imgClass" id="${item.affix_uuid }"></li>
			</c:if>
			<c:if test="${vs.index eq 2 }">
				<li><img alt="手持身份证银行卡" src="${basePath}${item.affix_path}"
					class="imgClass" id="${item.affix_uuid }"></li>
			</c:if>
			<c:if test="${vs.index eq 3 }">
				<li><img alt="身份证正面照" src="${basePath}${item.affix_path}"
					class="imgClass" id="${item.affix_uuid }"></li>
			</c:if>
			<c:if test="${vs.index eq 4 }">
				<li><img alt="身份证反面照" src="${basePath}${item.affix_path}"
					class="imgClass" id="${item.affix_uuid }"></li>
			</c:if>
			<c:if test="${vs.index eq 5 }">
				<li><img alt="信用卡正面照" src="${basePath}${item.affix_path}"
					class="imgClass" id="${item.affix_uuid }"></li>
			</c:if>
		</c:forEach>
	</ul>
</div>
<div style="margin: 50px 0;"></div>
<script>
	//加载图片轮播插件
	$(function(){
		$("#images").viewer();
		var picId = "${picId}";
		$("#"+picId).click();
	});
</script>
<style>
    #images > li {
      float: left;
      width: 33.3%;
      height: 33.3%;
      margin: 0 -1px -1px 0;
      border: 1px solid transparent;
      overflow: hidden;
    }

    #images > li > img {
      cursor: -webkit-zoom-in;
      cursor: zoom-in;
    }
</style>